var React = require('react');
var Link = require('react-router').Link;
var Header = require('../modules/Header');
var Footer = require('../modules/Footer');
import { Carousel,Row, Col,Card,BackTop } from 'antd';



import '../css/home.css';

var Home = React.createClass({
 
  tab:function(e){
    console.log(1);
      var _title = e.target.getAttribute('title');
      var tab1= document.getElementById('tab1');
      var tab2= document.getElementById('tab2')
        switch(_title){
          case "1":
            tab1.style.display='block';
            tab2.style.display='none';
          break;
          case "2":
            tab1.style.display='none';
            tab2.style.display='block';
          break;
         
        }
    },
 
      

    
	render:function(){
    var letterStyle = {
      clear:'both'
    };
    
		return (
      <div >
			  <Header/>
        <div className="box" style={letterStyle}></div>
        <div className="modIndex modIndexNew modSlideBox">
          <p className="title">新歌首发</p>
          <Row type="flex" justify="center">
            <Col span={2} onClick={this.tab} title='1'>内地</Col>
            <Col span={2} onClick={this.tab} title='2'>港台</Col>
            <Col span={2}>欧美</Col>
            <Col span={2}>韩国</Col>
            <Col span={2}>日本</Col>
          </Row>
          <div id="tab">
              <div id="tab1" >         
                  <Carousel autoplay>
                    <div >
                      <Card style={{ width: 300,float:"left",height:405,marginLeft:3 }} bodyStyle={{ padding: 0 }}>
                        <div className="custom-image">
                          <img alt="example" width="100%" src="../images/index1.jpg" />
                        </div>
                        <div className="custom-card">
                          <h1>岁月神偷</h1>
                          <p>周笔畅</p>
                        </div>
                      </Card>
                      <Card style={{ width: 300,float:"left",height:405,marginLeft:3 }} bodyStyle={{ padding: 0 }}>
                        <div className="custom-image">
                          <img alt="example" width="100%" src="../images/index2.jpg" />
                        </div>
                        <div className="custom-card">
                          <h1>金曲捞 第11期</h1>
                          <p>金曲捞</p>
                        </div>
                      </Card>
                      <Card style={{ width: 300,float:"left",height:405,marginLeft:3 }} bodyStyle={{ padding: 0 }}>
                        <div className="custom-image">
                          <img alt="example" width="100%" src="../images/index3.jpg" />
                        </div>
                        <div className="custom-card">
                          <h1>No Fear In My Heart</h1>
                          <p>朴树</p>
                        </div>
                      </Card>
                      <Card style={{ width: 300,float:"left",height:405,marginLeft:3 }} bodyStyle={{ padding: 0 }}>
                        <div className="custom-image">
                          <img alt="example" width="100%" src="../images/index4.jpg" />
                        </div>
                        <div className="custom-card">
                          <h1>歌声的翅膀 第10期</h1>
                          <p>歌声的翅膀</p>
                        </div>
                      </Card>
                      
                      
                    </div>
                    <div>
                      <Card style={{ width: 300,float:"left",height:405,marginLeft:3 }} bodyStyle={{ padding: 0 }}>
                        <div className="custom-image">
                          <img alt="example" width="100%" src="../images/index5.jpg" />
                        </div>
                        <div className="custom-card">
                          <h1>明日之子 第3期</h1>
                          <p>明日之子</p>
                        </div>
                      </Card>
                      <Card style={{ width: 300,float:"left",height:405,marginLeft:3 }} bodyStyle={{ padding: 0 }}>
                        <div className="custom-image">
                          <img alt="example" width="100%" src="../images/index6.jpg" />
                        </div>
                        <div className="custom-card">
                          <h1>中国有嘻哈 第1期</h1>
                          <p>中国有嘻哈</p>
                        </div>
                      </Card>
                      <Card style={{ width: 300,float:"left",height:405,marginLeft:2 }} bodyStyle={{ padding: 0 }}>
                        <div className="custom-image">
                          <img alt="example" width="100%" src="../images/index7.jpg" />
                        </div>
                        <div className="custom-card">
                          <h1>小活法</h1>
                          <p>苏晴</p>
                        </div>
                      </Card>
                      <Card style={{ width: 300,float:"left",height:405,marginLeft:2 }} bodyStyle={{ padding: 0 }}>
                        <div className="custom-image">
                          <img alt="example" width="100%" src="../images/index8.jpg" />
                        </div>
                        <div className="custom-card">
                          <h1>超强音浪 第2季 第13期</h1>
                          <p>超强音浪</p>
                        </div>
                      </Card>
          
                    </div>
                    <div>
                      <Card style={{ width: 300,float:"left",height:405,marginLeft:2 }} bodyStyle={{ padding: 0 }}>
                        <div className="custom-image">
                          <img alt="example" width="100%" src="../images/index9.jpg" />
                        </div>
                        <div className="custom-card">
                          <h1>还好在这里</h1>
                          <p>李行亮</p>
                        </div>
                      </Card>
                      <Card style={{ width: 300,float:"left",height:405,marginLeft:2 }} bodyStyle={{ padding: 0 }}>
                        <div className="custom-image">
                          <img alt="example" width="100%" src="../images/index10.jpg" />
                        </div>
                        <div className="custom-card">
                          <h1>思美人 电视剧原声带</h1>
                          <p>华语群星</p>
                        </div>
                      </Card>
                      <Card style={{ width: 300,float:"left",height:405,marginLeft:2 }} bodyStyle={{ padding: 0 }}>
                        <div className="custom-image">
                          <img alt="example" width="100%" src="../images/index11.jpg" />
                        </div>
                        <div className="custom-card">
                          <h1>Kissing paradise</h1>
                          <p>曲婉婷</p>
                        </div>
                      </Card>
                      <Card style={{ width: 300,float:"left",height:405,marginLeft:2 }} bodyStyle={{ padding: 0 }}>
                        <div className="custom-image">
                          <img alt="example" width="100%" src="../images/index12.jpg" />
                        </div>
                        <div className="custom-card">
                          <h1>迈克尔.杰克逊</h1>
                          <p>南征北战</p>
                        </div>
                      </Card>
                      
                    </div>
                    <div>
                      <Card style={{ width: 300,float:"left",height:405,marginLeft:2 }} bodyStyle={{ padding: 0 }}>
                        <div className="custom-image">
                          <img alt="example" width="100%" src="../images/index13.jpg" />
                        </div>
                        <div className="custom-card">
                          <h1>The Greatest Messi</h1>
                          <p>苏醒</p>
                        </div>
                      </Card>
                      <Card style={{ width: 300,float:"left",height:405,marginLeft:2 }} bodyStyle={{ padding: 0 }}>
                        <div className="custom-image">
                          <img alt="example" width="100%" src="../images/index14.jpg" />
                        </div>
                        <div className="custom-card">
                          <h1>新的自己</h1>
                          <p>阿里郎</p>
                        </div>
                      </Card>
                      <Card style={{ width: 300,float:"left",height:405,marginLeft:2 }} bodyStyle={{ padding: 0 }}>
                        <div className="custom-image">
                          <img alt="example" width="100%" src="../images/index15.jpg" />
                        </div>
                        <div className="custom-card">
                          <h1>满山桃花香</h1>
                          <p>马博</p>
                        </div>
                      </Card>
                      <Card style={{ width: 300,float:"left",height:405,marginLeft:2 }} bodyStyle={{ padding: 0 }}>
                        <div className="custom-image">
                          <img alt="example" width="100%" src="../images/index16.jpg" />
                        </div>
                        <div className="custom-card">
                          <h1>有娃儿</h1>
                          <p>谢帝</p>
                        </div>
                      </Card>
                      
                    </div>
                  </Carousel>
              </div>
              <div id="tab2" >
                  <Carousel autoplay>
                    <div >
                      <Card style={{ width: 300,float:"left",height:405,marginLeft:3 }} bodyStyle={{ padding: 0 }}>
                        <div className="custom-image">
                          <img alt="example" width="100%" src="../images/index17.jpg" />
                        </div>
                        <div className="custom-card">
                          <h1>花约</h1>
                          <p>Twins</p>
                        </div>
                      </Card>
                      <Card style={{ width: 300,float:"left",height:405,marginLeft:3 }} bodyStyle={{ padding: 0 }}>
                        <div className="custom-image">
                          <img alt="example" width="100%" src="../images/index18.jpg" />
                        </div>
                        <div className="custom-card">
                          <h1>说</h1>
                          <p>张信哲</p>
                        </div>
                      </Card>
                      <Card style={{ width: 300,float:"left",height:405,marginLeft:3 }} bodyStyle={{ padding: 0 }}>
                        <div className="custom-image">
                          <img alt="example" width="100%" src="../images/index19.jpg" />
                        </div>
                        <div className="custom-card">
                          <h1>三五得几</h1>
                          <p>王祖蓝</p>
                        </div>
                      </Card>
                      <Card style={{ width: 300,float:"left",height:405,marginLeft:3 }} bodyStyle={{ padding: 0 }}>
                        <div className="custom-image">
                          <img alt="example" width="100%" src="../images/index20.jpg" />
                        </div>
                        <div className="custom-card">
                          <h1>最初来到世界的模样</h1>
                          <p>林心伊</p>
                        </div>
                      </Card>
                      
                      
                    </div>
                    <div>
                      <Card style={{ width: 300,float:"left",height:405,marginLeft:3 }} bodyStyle={{ padding: 0 }}>
                        <div className="custom-image">
                          <img alt="example" width="100%" src="../images/index21.jpg" />
                        </div>
                        <div className="custom-card">
                          <h1>最初来到世界的模样</h1>
                          <p>林心伊</p>
                        </div>
                      </Card>
                      <Card style={{ width: 300,float:"left",height:405,marginLeft:3 }} bodyStyle={{ padding: 0 }}>
                        <div className="custom-image">
                          <img alt="example" width="100%" src="../images/index22.jpg" />
                        </div>
                        <div className="custom-card">
                          <h1>最初来到世界的模样</h1>
                          <p>林心伊</p>
                        </div>
                      </Card>
                      <Card style={{ width: 300,float:"left",height:405,marginLeft:2 }} bodyStyle={{ padding: 0 }}>
                        <div className="custom-image">
                          <img alt="example" width="100%" src="../images/index23.jpg" />
                        </div>
                        <div className="custom-card">
                        <h1>最初来到世界的模样</h1>
                          <p>林心伊</p>
                        </div>
                      </Card>
                      <Card style={{ width: 300,float:"left",height:405,marginLeft:2 }} bodyStyle={{ padding: 0 }}>
                        <div className="custom-image">
                          <img alt="example" width="100%" src="../images/index11.jpg" />
                        </div>
                        <div className="custom-card">
                        <h1>最初来到世界的模样</h1>
                          <p>林心伊</p>
                        </div>
                      </Card>
          
                    </div>
                    <div>
                      <Card style={{ width: 300,float:"left",height:405,marginLeft:2 }} bodyStyle={{ padding: 0 }}>
                        <div className="custom-image">
                          <img alt="example" width="100%" src="../images/index3.jpg" />
                        </div>
                        <div className="custom-card">
                        <h1>最初来到世界的模样</h1>
                          <p>林心伊</p>
                        </div>
                      </Card>
                      <Card style={{ width: 300,float:"left",height:405,marginLeft:2 }} bodyStyle={{ padding: 0 }}>
                        <div className="custom-image">
                          <img alt="example" width="100%" src="../images/index1.jpg" />
                        </div>
                        <div className="custom-card">
                        <h1>最初来到世界的模样</h1>
                          <p>林心伊</p>
                        </div>
                      </Card>
                      <Card style={{ width: 300,float:"left",height:405,marginLeft:2 }} bodyStyle={{ padding: 0 }}>
                        <div className="custom-image">
                          <img alt="example" width="100%" src="../images/index14.jpg" />
                        </div>
                        <div className="custom-card">
                        <h1>最初来到世界的模样</h1>
                          <p>林心伊</p>
                        </div>
                      </Card>
                      <Card style={{ width: 300,float:"left",height:405,marginLeft:2 }} bodyStyle={{ padding: 0 }}>
                        <div className="custom-image">
                          <img alt="example" width="100%" src="../images/index16.jpg" />
                        </div>
                        <div className="custom-card">
                        <h1>最初来到世界的模样</h1>
                          <p>林心伊</p>
                        </div>
                      </Card>
                      
                    </div>
                    <div>
                      <Card style={{ width: 300,float:"left",height:405,marginLeft:2 }} bodyStyle={{ padding: 0 }}>
                        <div className="custom-image">
                          <img alt="example" width="100%" src="../images/index18.jpg" />
                        </div>
                        <div className="custom-card">
                        <h1>最初来到世界的模样</h1>
                          <p>林心伊</p>
                        </div>
                      </Card>
                      <Card style={{ width: 300,float:"left",height:405,marginLeft:2 }} bodyStyle={{ padding: 0 }}>
                        <div className="custom-image">
                          <img alt="example" width="100%" src="../images/index24.jpg" />
                        </div>
                        <div className="custom-card">
                        <h1>最初来到世界的模样</h1>
                          <p>林心伊</p>
                        </div>
                      </Card>
                      <Card style={{ width: 300,float:"left",height:405,marginLeft:2 }} bodyStyle={{ padding: 0 }}>
                        <div className="custom-image">
                          <img alt="example" width="100%" src="../images/index15.jpg" />
                        </div>
                        <div className="custom-card">
                        <h1>最初来到世界的模样</h1>
                          <p>林心伊</p>
                        </div>
                      </Card>
                      <Card style={{ width: 300,float:"left",height:405,marginLeft:2 }} bodyStyle={{ padding: 0 }}>
                        <div className="custom-image">
                          <img alt="example" width="100%" src="../images/index16.jpg" />
                        </div>
                        <div className="custom-card">
                        <h1>最初来到世界的模样</h1>
                          <p>林心伊</p>
                        </div>
                      </Card>
                      
                    </div>
                  </Carousel >
              </div>
          </div>
              
        </div>
        <img src="../images/title.png" id="title"/>
        <div id="tab01" >         
                  <Carousel effect="fade" >
                    <div >
                      <Card style={{ width: 300,float:"left",height:405,marginLeft:3 }} bodyStyle={{ padding: 0 }}>
                        <div className="custom-image">
                          <img alt="example" width="100%" src="../images/index5.jpg" />
                        </div>
                        <div className="custom-card">
                          <h1>明日之子 第3期</h1>
                          <p>明日之子</p>
                        </div>
                      </Card>
                      <Card style={{ width: 300,float:"left",height:405,marginLeft:3 }} bodyStyle={{ padding: 0 }}>
                        <div className="custom-image">
                          <img alt="example" width="100%" src="../images/index6.jpg" />
                        </div>
                        <div className="custom-card">
                          <h1>中国有嘻哈 第1期</h1>
                          <p>中国有嘻哈</p>
                        </div>
                      </Card>
                      <Card style={{ width: 300,float:"left",height:405,marginLeft:2 }} bodyStyle={{ padding: 0 }}>
                        <div className="custom-image">
                          <img alt="example" width="100%" src="../images/index11.jpg" />
                        </div>
                        <div className="custom-card">
                          <h1>Kissing paradise</h1>
                          <p>曲婉婷</p>
                        </div>
                      </Card>
                      <Card style={{ width: 300,float:"left",height:405,marginLeft:2 }} bodyStyle={{ padding: 0 }}>
                        <div className="custom-image">
                          <img alt="example" width="100%" src="../images/index12.jpg" />
                        </div>
                        <div className="custom-card">
                          <h1>迈克尔.杰克逊</h1>
                          <p>南征北战</p>
                        </div>
                      </Card>
                      
                      
                      
                    </div>
                    <div>
                      <Card style={{ width: 300,float:"left",height:405,marginLeft:3 }} bodyStyle={{ padding: 0 }}>
                        <div className="custom-image">
                          <img alt="example" width="100%" src="../images/index1.jpg" />
                        </div>
                        <div className="custom-card">
                          <h1>岁月神偷</h1>
                          <p>周笔畅</p>
                        </div>
                      </Card>
                      <Card style={{ width: 300,float:"left",height:405,marginLeft:3 }} bodyStyle={{ padding: 0 }}>
                        <div className="custom-image">
                          <img alt="example" width="100%" src="../images/index2.jpg" />
                        </div>
                        <div className="custom-card">
                          <h1>金曲捞 第11期</h1>
                          <p>金曲捞</p>
                        </div>
                      </Card>
                      <Card style={{ width: 300,float:"left",height:405,marginLeft:2 }} bodyStyle={{ padding: 0 }}>
                        <div className="custom-image">
                          <img alt="example" width="100%" src="../images/index7.jpg" />
                        </div>
                        <div className="custom-card">
                          <h1>小活法</h1>
                          <p>苏晴</p>
                        </div>
                      </Card>
                      <Card style={{ width: 300,float:"left",height:405,marginLeft:2 }} bodyStyle={{ padding: 0 }}>
                        <div className="custom-image">
                          <img alt="example" width="100%" src="../images/index8.jpg" />
                        </div>
                        <div className="custom-card">
                          <h1>超强音浪 第2季 第13期</h1>
                          <p>超强音浪</p>
                        </div>
                      </Card>
          
                    </div>
                    <div>
                      <Card style={{ width: 300,float:"left",height:405,marginLeft:2 }} bodyStyle={{ padding: 0 }}>
                        <div className="custom-image">
                          <img alt="example" width="100%" src="../images/index9.jpg" />
                        </div>
                        <div className="custom-card">
                          <h1>还好在这里</h1>
                          <p>李行亮</p>
                        </div>
                      </Card>
                      <Card style={{ width: 300,float:"left",height:405,marginLeft:2 }} bodyStyle={{ padding: 0 }}>
                        <div className="custom-image">
                          <img alt="example" width="100%" src="../images/index10.jpg" />
                        </div>
                        <div className="custom-card">
                          <h1>思美人 电视剧原声带</h1>
                          <p>华语群星</p>
                        </div>
                      </Card>
                      <Card style={{ width: 300,float:"left",height:405,marginLeft:3 }} bodyStyle={{ padding: 0 }}>
                        <div className="custom-image">
                          <img alt="example" width="100%" src="../images/index3.jpg" />
                        </div>
                        <div className="custom-card">
                          <h1>No Fear In My Heart</h1>
                          <p>朴树</p>
                        </div>
                      </Card>
                      <Card style={{ width: 300,float:"left",height:405,marginLeft:3 }} bodyStyle={{ padding: 0 }}>
                        <div className="custom-image">
                          <img alt="example" width="100%" src="../images/index4.jpg" />
                        </div>
                        <div className="custom-card">
                          <h1>歌声的翅膀 第10期</h1>
                          <p>歌声的翅膀</p>
                        </div>
                      </Card>
                      
                    </div>
                    <div>
                      <Card style={{ width: 300,float:"left",height:405,marginLeft:2 }} bodyStyle={{ padding: 0 }}>
                        <div className="custom-image">
                          <img alt="example" width="100%" src="../images/index13.jpg" />
                        </div>
                        <div className="custom-card">
                          <h1>The Greatest Messi</h1>
                          <p>苏醒</p>
                        </div>
                      </Card>
                      <Card style={{ width: 300,float:"left",height:405,marginLeft:2 }} bodyStyle={{ padding: 0 }}>
                        <div className="custom-image">
                          <img alt="example" width="100%" src="../images/index14.jpg" />
                        </div>
                        <div className="custom-card">
                          <h1>新的自己</h1>
                          <p>阿里郎</p>
                        </div>
                      </Card>
                      <Card style={{ width: 300,float:"left",height:405,marginLeft:2 }} bodyStyle={{ padding: 0 }}>
                        <div className="custom-image">
                          <img alt="example" width="100%" src="../images/index15.jpg" />
                        </div>
                        <div className="custom-card">
                          <h1>满山桃花香</h1>
                          <p>马博</p>
                        </div>
                      </Card>
                      <Card style={{ width: 300,float:"left",height:405,marginLeft:2 }} bodyStyle={{ padding: 0 }}>
                        <div className="custom-image">
                          <img alt="example" width="100%" src="../images/index16.jpg" />
                        </div>
                        <div className="custom-card">
                          <h1>有娃儿</h1>
                          <p>谢帝</p>
                        </div>
                      </Card>
                      
                    </div>
                  </Carousel>
              </div>
        <div id="tab02">
          <div className="toplist_bg">
              <h3 style={{textAlign:'center',fontSize:20,marginTop:60,color:'white'}}>巅峰榜</h3>
              <h1 style={{textAlign:'center',fontSize:30,color:'white'}}>流行指数</h1>
              <ul id="ul1">
                <li>
                  1 等我回家<br/><i>薛之谦/王栎鑫</i>
                </li>
                <li>
                  2 As If It's Your Last<br/><i>Black Pink</i>
                </li>
                <li>
                  3 追光者<br/><i>曾令儿</i>
                </li>
                <li>
                  4 布拉格广场<br/><i>蔡依林/周杰伦</i>
                </li>
              </ul>
          </div>
          <div className="toplist_bg">
              <h3 style={{textAlign:'center',fontSize:20,marginTop:60,color:'white'}}>巅峰榜</h3>
              <h1 style={{textAlign:'center',fontSize:30,color:'white'}}>热歌</h1>
              <ul id="ul1">
                <li>
                  1 等我回家<br/><i>薛之谦/王栎鑫</i>
                </li>
                <li>
                  2 As If It's Your Last<br/><i>Black Pink</i>
                </li>
                <li>
                  3 追光者<br/><i>曾令儿</i>
                </li>
                <li>
                  4 布拉格广场<br/><i>蔡依林/周杰伦</i>
                </li>
              </ul>
          </div>
          <div className="toplist_bg">
              <h3 style={{textAlign:'center',fontSize:20,marginTop:60,color:'white'}}>巅峰榜</h3>
              <h1 style={{textAlign:'center',fontSize:30,color:'white'}}>新歌</h1>
              <ul id="ul1">
                <li>
                  1 等我回家<br/><i>薛之谦/王栎鑫</i>
                </li>
                <li>
                  2 As If It's Your Last<br/><i>Black Pink</i>
                </li>
                <li>
                  3 追光者<br/><i>曾令儿</i>
                </li>
                <li>
                  4 布拉格广场<br/><i>蔡依林/周杰伦</i>
                </li>
              </ul>
          </div>
          <div className="toplist_bg">
              <h3 style={{textAlign:'center',fontSize:20,marginTop:60,color:'white'}}>巅峰榜</h3>
              <h1 style={{textAlign:'center',fontSize:30,color:'white'}}>欧美</h1>
              <ul id="ul1">
                <li>
                  1 等我回家<br/><i>薛之谦/王栎鑫</i>
                </li>
                <li>
                  2 As If It's Your Last<br/><i>Black Pink</i>
                </li>
                <li>
                  3 追光者<br/><i>曾令儿</i>
                </li>
                <li>
                  4 布拉格广场<br/><i>蔡依林/周杰伦</i>
                </li>
              </ul>
          </div>
        </div>   
        <img src="../images/title2.png" id="title"/>
        <div id="tab01" >         
                  <Carousel effect="fade" >
                    <div >
                     
                      <Card style={{ width: 300,float:"left",height:405,marginLeft:3 }} bodyStyle={{ padding: 0 }}>
                        <div className="custom-image">
                          <img alt="example" width="100%" src="../images/index21.jpg" />
                        </div>
                        <div className="custom-card" style={{background:'black'}}>
                          <h1 style={{color:'white'}}>直戳泪点 | 哭腔与感情的融合...</h1>
                          <p>播放量：237.6万</p>
                        </div>
                      </Card>
                      <Card style={{ width: 300,float:"left",height:405,marginLeft:3 }} bodyStyle={{ padding: 0 }}>
                        <div className="custom-image">
                          <img alt="example" width="100%" src="../images/index22.jpg" />
                        </div>
                        <div className="custom-card" style={{background:'black',opacity:'0.8'}}>
                          <h1 style={{color:'white'}}>超燃神曲：这些小提琴跳动你...</h1>
                          <p>播放量：70.7万</p>
                        </div>
                      </Card>
                      <Card style={{ width: 300,float:"left",height:405,marginLeft:2 }} bodyStyle={{ padding: 0 }}>
                        <div className="custom-image">
                          <img alt="example" width="100%" src="../images/index23.jpg" />
                        </div>
                        <div className="custom-card" style={{background:'black'}}>
                          <h1 style={{color:'white'}}>人生所有的酒，都不如听民谣...</h1>
                          <p>播放量：265.0万</p>
                        </div>
                      </Card>
                      <Card style={{ width: 300,float:"left",height:405,marginLeft:2 }} bodyStyle={{ padding: 0 }}>
                        <div className="custom-image">
                          <img alt="example" width="100%" src="../images/index24.jpg" />
                        </div>
                        <div className="custom-card" style={{background:'black',opacity:'0.8'}}>
                          <h1 style={{color:'white'}}>因为这些偶像剧，所以我们青...</h1>
                          <p>播放量：76.8万</p>
                        </div>
                      </Card>
                      
                      
                    </div>
                    <div>
                       <Card style={{ width: 300,float:"left",height:405,marginLeft:3 }} bodyStyle={{ padding: 0 }}>
                        <div className="custom-image">
                          <img alt="example" width="100%" src="../images/index25.jpg" />
                        </div>
                        <div className="custom-card" style={{background:'black'}}>
                          <h1 style={{color:'white'}}>这才是游戏：芯片电子掀起的...</h1>
                          <p>播放量：9.6万</p>
                        </div>
                      </Card>
                      <Card style={{ width: 300,float:"left",height:405,marginLeft:3 }} bodyStyle={{ padding: 0 }}>
                        <div className="custom-image">
                          <img alt="example" width="100%" src="../images/index26.jpg" />
                        </div>
                        <div className="custom-card" style={{background:'black',opacity:'0.8'}}>
                          <h1 style={{color:'white'}}>伴你到最后的不是旧人的手,...</h1>
                          <p>播放量：20.9万</p>
                        </div>
                      </Card>
                      <Card style={{ width: 300,float:"left",height:405,marginLeft:2 }} bodyStyle={{ padding: 0 }}>
                        <div className="custom-image">
                          <img alt="example" width="100%" src="../images/index27.jpg" />
                        </div>
                        <div className="custom-card" style={{background:'black'}}>
                          <h1 style={{color:'white'}}>一曲温酒年少狂，一人独看风...</h1>
                          <p>播放量：8.6万</p>
                        </div>
                      </Card>
                      <Card style={{ width: 300,float:"left",height:405,marginLeft:2 }} bodyStyle={{ padding: 0 }}>
                        <div className="custom-image">
                          <img alt="example" width="100%" src="../images/index28.jpg" />
                        </div>
                        <div className="custom-card" style={{background:'black',opacity:'0.8'}}>
                          <h1 style={{color:'white'}}>白首ACG | 久听不腻的清新小...</h1>
                          <p>播放量：16.0万 </p>
                        </div>
                      </Card>
          
                    </div>
                    <div>
                      <Card style={{ width: 300,float:"left",height:405,marginLeft:2 }} bodyStyle={{ padding: 0 }}>
                        <div className="custom-image">
                          <img alt="example" width="100%" src="../images/index29.jpg" />
                        </div>
                        <div className="custom-card" style={{background:'black'}}>
                          <h1 style={{color:'white'}}>韩式R&B,魅惑男声挑逗你的听...</h1>
                          <p>播放量：23.1万</p>
                        </div>
                      </Card>
                      <Card style={{ width: 300,float:"left",height:405,marginLeft:2 }} bodyStyle={{ padding: 0 }}>
                        <div className="custom-image">
                          <img alt="example" width="100%" src="../images/index30.jpg" />
                        </div>
                        <div className="custom-card" style={{background:'black',opacity:'0.8'}}>
                          <h1 style={{color:'white'}}>东方同人曲 | 东方梦，沁人心</h1>
                          <p>播放量：4.1万</p>
                        </div>
                      </Card>
                      <Card style={{ width: 300,float:"left",height:405,marginLeft:3 }} bodyStyle={{ padding: 0 }}>
                        <div className="custom-image">
                          <img alt="example" width="100%" src="../images/index31.jpg" />
                        </div>
                        <div className="custom-card" style={{background:'black'}}>
                          <h1 style={{color:'white'}}>后摇人声采样，通往心灵的独白</h1>
                          <p>播放量：4.9万</p>
                        </div>
                      </Card>
                      <Card style={{ width: 300,float:"left",height:405,marginLeft:3 }} bodyStyle={{ padding: 0 }}>
                        <div className="custom-image">
                          <img alt="example" width="100%" src="../images/index32.jpg" />
                        </div>
                        <div className="custom-card" style={{background:'black',opacity:'0.8'}}>
                          <h1 style={{color:'white'}}>暑假必备：和闺蜜一起在夏日...</h1>
                          <p>播放量：12.1万</p>
                        </div>
                      </Card>
                      
                    </div>
                   
                  </Carousel>
              </div>       
                <BackTop>
                  
                    <div className="ant-back-top-inner">UP</div>
                  
                </BackTop>

        <Footer/>        
      </div>		
		)

	},
  

})


module.exports = Home;